<template>
  <div>
    <!-- 排序说明 -->
    <div class="app-main-tips-box">
      <div class="title">
        <i class="el-icon-warning" /> 会员卡排序说明
      </div>
      <ul>
        <li>1.根据您的排序，管理会员可以升级的会员卡类型范围，只能往上升。</li>
        <li>2.会员到期后统一失效会员身份，而不是降级。</li>
        <li>3.拖动卡类型进行排序。</li>
      </ul>
    </div>

    <!-- 卡列表 -->
    <ul class="card-list">
      <li class="clearfix">
        <div class="left">顺序</div>
        <div class="right">卡类型</div>
      </li>
      <Draggable :list="list" :options="{group:'list', filter: '.undrag', draggable: '.drag'}">
        <li v-for="(item,index) in list" :key="index" class="clearfix" :class="index === 0 ? 'isdisable undrag ' : 'drag'">
          <div class="left">{{ index+1 }}</div>
          <div class="right">{{ item.categoryName }}</div>
        </li>
      </Draggable>
    </ul>
  </div>
</template>

<script>
// 拖拽
import Draggable from 'vuedraggable'
import { getAllVipCardList, editCardOrder } from '@/api/vip'
export default {
  components: { Draggable },
  data() {
    return {
      tableLoading: true,
      list: [],
      orderObj: {}
    }
  },
  mounted() {
    this.getCardList() // 获取卡数据
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取卡数据
    getCardList() {
      this.tableLoading
      getAllVipCardList().then(res => {
        this.tableLoading = false
        this.list = res.data
      })
    },

    /**
       *  按钮组
       */
    // 提交排序
    onSubmit() {
      const orderObj = {}
      this.list.forEach(function(value, index) {
        orderObj[value.id] = index + 1
      })
      editCardOrder(orderObj).then(res => {
        this.$emit('nextStep')
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .isdisable.undrag {
    background: #eee;
    color: #999;
  }
  .card-list {
    overflow: auto;
    width: 90%;
    height: 400px;
    margin: 20px auto;
    li {
      border-top: 1px solid #e7e7e7;
      border-left: 1px solid #e7e7e7;
      border-right: 1px solid #e7e7e7;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
    }
    li:last-child {
      border-bottom: 1px solid #e7e7e7;
    }
    .left {
      float: left;
      width: 80px;
      border-right: 1px solid #e7e7e7;
      text-align: center;
    }
    .right {
      float: left;
      text-indent: 1em;
    }
  }
</style>
